<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <common-toolbar text="总部管理">
                <!-- <el-button class="btn commonButton" type="default" @click="dialogVisible=true">筛选</el-button> -->
                <el-button class="btn commonButton" type="primary" @click="searchErrorList" style="background:#409EFF !important;border-color: #409EFF;">接入新总部</el-button>
            </common-toolbar>
            <layout layout="center"  class="centerSection noScrollSection">
                <el-table
                        :data="data"
                        v-loading.iTable="loading"
                        :stripe="true"
                        ref="mutipleTable"
                        :height="height"
                        :highlight-current-row="true"
                        border
                        :tree-props="{children: 'children'}"
                        row-key="id"
                        header-row-class-name="tableHeader"
                        tooltip-effect="dark"
                        class="watchTable"
                        style="width: 100%">
                    <el-table-column
                            label="No."
                            type="index"
                            :index="indexMethod"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="headquartersName"
                            label="总部名称"
                    >
                    </el-table-column>
                    <el-table-column
                            property="contacts"
                            label="联系人"
                            >
                    </el-table-column>
                    <el-table-column
                            property="number"
                            label="联系方式"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            property="email"
                            show-overflow-tooltip="true"
                            label="联系邮箱">
                    </el-table-column> 
                    <el-table-column
                            property="adminUsername"
                            label="管理员用户名">
                    </el-table-column> 
                                       
                    <el-table-column
                            property="showTime"
                            label="总部接入时间"
                            width="160">
                        <template slot-scope="scope">
                            <div style="text-align: left;">
                                {{scope.row.createDate}}
                            </div>
                            <!-- <div style="text-align: left;line-height: 30px;height: 30px;">
                                {{scope.row.playTime}}
                            </div> -->
                        </template>
                    </el-table-column>
                    <el-table-column
                            property="holderCode"
                            show-overflow-tooltip="true"
                            label="对应广告商账号">
                             <template slot-scope="scope">
                            <div v-if="scope.row.holderCode == 'unselected'">
                                未选择
                            </div>
                            <div v-else >
                                {{scope.row.holderCode}}
                            </div>
                        </template>
                    </el-table-column> 
                    <el-table-column label="操作" width="200">
                       <template slot-scope="scope">
                           <inner-button text="影院接入" @click="showDetail(scope.row)"></inner-button>
                           <inner-button text="账号设置" @click="showDetail2(scope.row)"></inner-button>
                       </template>
                   </el-table-column>
                </el-table>
                <div class="paginationDiv">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </div>
            
            </layout>
        </layout>
        <el-dialog
                title="筛选"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="专资编码">
                        <el-input size="small" v-model="form.code"></el-input>
                    </el-form-item>
                    <el-form-item label="影院名称">
                        <el-input size="small" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围">
                        <el-date-picker
                                v-model="form.date"
                                type="daterange"
                                range-separator="至"
                                size="small"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
import Service from './userManagement.service';
@Component
export default class cinemaShowLog extends Vue{
    height = 500;
    windowHeight = 700;
    loading = false;
    data = [];
    onlyShowError = false;
    total = 0;
    page = 1;
    pageSize = 30;
    cinemaName = '';
    cinemaCode = '';

    dialogVisible = false;
    form = {
        name: '',
        code: '',
        date : ''
    };
    constructor(){
        super();

    };
     // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
    searchErrorList(){
        // this.searchList();
         this.$router.push({
                path:'/set/userManagement/newManagement',
                name:'总部管理'
            })
    }

    searchAllList(){
        this.onlyShowError = false;
        this.searchList();
    }

    searchList(){
        let params = {
            pageNum: this.page,
            pageSize: this.pageSize,
            status: 0,
            cinemaName: this.cinemaName,
            cinemaCode: this.cinemaCode,
        }
        //console.log(params)
        this.loading=true;
        Service.headquartersPage(params).then(res=>{
             if(res.data.succeeded){
                this.data = res.data.data;
                this.total = res.data.totalRecords;
                this.loading=false;
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
                this.loading=false;
            }
        })
    }

    handleSizeChange(val) {
        this.pageSize = val;
        this.searchList();
    }

    handleCurrentChange(val) {
        this.page = val;
        this.searchList();
    }

    showDetail(row){
         let params = {
                headquartersCode: row
            };
            window.localStorage.setItem('headquartersCode',JSON.stringify(row))
            this.$router.push({
                path:'/set/userManagement/managementList',
                name:'影院接入',
                params:params
            })
    }
showDetail2(row) {
    let params = {
                id: row.id
            };
             window.localStorage.setItem('headquartersCode',JSON.stringify(row))
            this.$router.push({
                path:'/set/userManagement/accountNumber',
                name:'账号设置',
                params:params
            })
}
    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    }

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }

    created(){
        const me = this;
        this.resizeEvent();
        this.searchList();
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
    };
    mounted(){

    };

}
</script>
<style lang="scss" scoped>
    // @import '../../styles/login.scss';

</style>